<template>
  <div class="container">
    <!-- <div class="boxWrap" v-bind:style="{backgroundImage:'url(' + bg + ')'}"> -->
    <div class="boxWrap">
      <!-- <header class="topLogo">
        <img src="../../../static/img/logo.png" alt="">
        <span class="title">
          武汉市保障农名工工资支付监管预警平台
        </span>
      </header> -->
      <!-- 头部 -->
      <loginHeader></loginHeader>
      <!-- 注册表单 -->
      <div class="mainBox registerMainBox" v-show="isRegister">
        <el-row class="reminder">
          <i class="el-icon-warning"></i>
          项目用户请先联系所属企业单位开通项目账号后再通过【企业平台】登入系统
        </el-row>
        <el-row class="formTop">
          <div class="loginLink">
            <span>已有企业账号，</span>
            <span @click="skipLogin" class="toLogin">立即登录</span>
            <!-- <el-link type="primary" @click="skipLogin" :underline="false">立即登录</el-link> -->
          </div>
          <div class="applyTitle">申请企业账号</div>
        </el-row>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="ruleForm"
          status-icon
          aria-autocomplete="false"
          label-width="140px"
        >
          <el-form-item label="企业名称" prop="companyName">
            <el-input
              v-model.trim="ruleForm.companyName"
              placeholder="输入企业名称"
              clearable
              @blur="ruleForm.companyName = changeValue($event)"
            ></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="uscc">
            <el-input
              v-model.trim="ruleForm.uscc"
              placeholder="输入统一社会信用代码"
              clearable
              @blur="ruleForm.uscc = changeValue($event)"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业所属行业" prop="industry">
            <el-cascader
              ref="industry"
              class="industrySelect"
              v-model="ruleForm.industry"
              :options="industryOptions"
              filterable
              @change="getIndustry"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="企业人员规模" prop="scale">
            <el-select v-model="ruleForm.scale" placeholder="请选择">
              <el-option
                v-for="(item, index) in scaleSelct"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业归属" prop="belong" class="radioBox">
            <el-radio-group v-model="ruleForm.belong" @change="changeBelong">
              <el-radio label="1">本地企业</el-radio>
              <el-radio label="2">外地企业</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- v-model="ruleForm.regAddress" -->
          <el-form-item label="企业注册地址" prop="regAddress">
            <el-cascader
              ref="regAreas"
              class="areasSelect"
              :key="isShowRegArea"
              v-model="ruleForm.regAddress"
              :options="regAreasOptions"
              @change="handerChange"
              clearable
              filterable
              placeholder="请选择营业执照上的注册地址"
            ></el-cascader>
          </el-form-item>
          <!-- v-model="ruleForm.manageAddress" -->
          <el-form-item
            label="企业经营地址"
            prop="manageAddress"
            v-if="ruleForm.belong === '2'"
          >
            <el-cascader
              ref="manageAreas"
              class="areasSelect"
              :key="isShowManaArea"
              v-model="ruleForm.manageAddress"
              :options="areasOptions"
              clearable
              filterable
              placeholder="请选择企业在本地经营场所地址"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="企业经营地址" prop="address" v-else>
            <el-input
              v-model.trim="ruleForm.address"
              placeholder="请选择企业在本地经营场所地址"
              disabled
              @blur="ruleForm.address = changeValue($event)"
            ></el-input>
          </el-form-item>
          <el-form-item label="密保手机号" prop="phone">
            <el-input
              v-model.trim="ruleForm.phone"
              placeholder="用于接收审核结果和后期账号安全设置"
              clearable
              @blur="ruleForm.phone = changeValue($event)"
            ></el-input>
          </el-form-item>
          <el-form-item label="短信验证码" prop="vscode" class="vscodeInput">
            <el-input
              v-model.trim="ruleForm.vscode"
              placeholder="输入短信验证码"
              clearable
              @blur="ruleForm.vscode = changeValue($event)"
            ></el-input>
            <el-button
              size="medium"
              class="vscodeBtn"
              v-show="!isCount"
              @click="getVscode()"
              :disabled="noTel"
              >获取验证码</el-button
            >
            <el-button
              type="info"
              plain
              size="medium"
              round
              v-show="isCount"
              disabled
              >{{ countDownTime }}s后重新获取</el-button
            >
          </el-form-item>
          <el-form-item label="企业资料" prop="fileImg" class="imgLabel">
            <ul class="imgBoxs clearfix">
              <li class="imgBox">
                <div class="imgTopBox">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击上传图片"
                    placement="bottom"
                  >
                    <form class="uploadBtn" id="licenseForm">
                      <input
                        type="file"
                        name="file"
                        id="licenseFile"
                        accept="image/png, image/jpeg, image/jpg"
                        @change="
                          uploadImg('licenseFile', 0, 'licenseForm', 'LICENSE')
                        "
                      />
                      <i class="el-icon-plus"></i>
                      <img :src="file[0].imgSrc" v-show="file[0].isShow" />
                    </form>
                  </el-tooltip>
                  <div class="imgName">企业营业执照</div>
                </div>
                <el-button type="text" @click="licenseDialog = true"
                  >示例图</el-button
                >
              </li>
              <li class="imgBox">
                <div class="imgTopBox">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击上传图片"
                    placement="bottom"
                  >
                    <form class="uploadBtn" id="idcardForm1">
                      <input
                        type="file"
                        name="file"
                        id="idcardFront"
                        accept="image/png, image/jpeg, image/jpg"
                        @change="
                          uploadImg(
                            'idcardFront',
                            1,
                            'idcardForm1',
                            'IDCARDFRONT'
                          )
                        "
                      />
                      <i class="el-icon-plus"></i>
                      <img :src="file[1].imgSrc" v-show="file[1].isShow" />
                    </form>
                  </el-tooltip>
                  <div class="imgName">法人身份证正面</div>
                </div>
                <el-button type="text" @click="idcardDialog1 = true"
                  >示例图</el-button
                >
              </li>
              <li class="imgBox">
                <div class="imgTopBox">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击上传图片"
                    placement="bottom"
                  >
                    <form class="uploadBtn" id="idcardForm2">
                      <input
                        type="file"
                        name="file"
                        id="idcardBack"
                        accept="image/png, image/jpeg, image/jpg"
                        @change="
                          uploadImg(
                            'idcardBack',
                            2,
                            'idcardForm2',
                            'IDCARDBACK'
                          )
                        "
                      />
                      <i class="el-icon-plus"></i>
                      <img :src="file[2].imgSrc" v-show="file[2].isShow" />
                    </form>
                  </el-tooltip>
                  <div class="imgName">法人身份证反面</div>
                </div>
                <el-button type="text" @click="idcardDialog2 = true"
                  >示例图</el-button
                >
              </li>
            </ul>
            <div class="imgRemind">{{ imgRemind }}</div>
          </el-form-item>
          <el-form-item label="" prop="" style="text-align: left">
            <el-button
              type="primary"
              size="medium"
              class="submitBtn registerBtn saveBtn"
              @click="submitForm('ruleForm')"
              :loading="isSubmit"
              >提交申请</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 注册完成 -->
      <div class="mainBox registered" v-show="!isRegister">
        <img src="../../../static/img/success.png" alt />
        <div class="suceesRemind">账号申请提交成功</div>
        <div class="messageRemind">
          审核需要1-3个工作日, 审核结果将发送到企业密保手机号<span>{{
            ruleForm.phone
          }}</span
          >，请您留意查收
        </div>
        <el-button size="medium" class="submitBtn" @click="skipLogin"
          >返回登录</el-button
        >
      </div>
    </div>
    <el-dialog
      title="营业执照示例图"
      :visible.sync="licenseDialog"
      width="500px;"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <img src="../../../static/img/register/license.jpg" width="400px;" />
    </el-dialog>
    <el-dialog
      title="身份证正面示例图"
      :visible.sync="idcardDialog1"
      width="500px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <img src="../../../static/img/register/idcard2.jpg" width="400px;" />
    </el-dialog>
    <el-dialog
      title="身份证反面示例图"
      :visible.sync="idcardDialog2"
      width="500px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <img src="../../../static/img/register/idcard1.jpg" width="400px;" />
    </el-dialog>
  </div>
</template>

<script>
import jqFrom from '../../kits/jquery.form'
import common from '../../kits/common'
import loginHeader from '@/components/publicCom/loginHeader'

export default {
  name: 'registerOld',
  components: {
    loginHeader,
    // loginFooter,
  },
  data() {
    //验证企业名称
    var validateName = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('企业名称不能为空'))
      } else {
        if (value.length > 100) {
          callback(new Error('企业名称不能超过100个字符'))
        } else {
          if (this.ruleForm.uscc !== '') {
            this.$refs.ruleForm.validateField('uscc')
          }
          callback()
        }
      }
    }
    //验证uscc
    var validateUscc = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('统一社会信用代码不能为空'))
      } else {
        var regUscc = /^[0-9A-Z]{2}[0-9]{6}[0-9A-Z]{10}$/
        if (!regUscc.test(value)) {
          callback(new Error('统一社会信用代码格式不正确'))
        } else {
          this.axios({
            method: 'post',
            url: 'api-c/companyaudit/base/validcompanyuscc',
            data: {
              name: this.ruleForm.companyName.replace(/\s+/g, ''),
              uscc: value,
            },
          })
            .then((res) => {
              if (!res.data.hasError) {
                callback()
              } else {
                callback(new Error(res.data.errorMsg))
              }
            })
            .catch((error) => {
              callback(new Error('企业信息校验失败，请稍后重试'))
            })
        }
      }
    }
    //验证手机号码
    var validatePhone = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else {
        var regTel = /^1[3456789]\d{9}$/
        if (!regTel.test(value)) {
          callback(new Error('手机号码格式不正确'))
        } else {
          this.noTel = false
        }
        callback()
      }
    }
    //验证验证码
    var validateVscode = (rule, value, callback) => {
      value = value.replace(/\s+/g, '')
      if (value === '') {
        callback(new Error('验证码不能为空'))
      } else {
        this.axios({
          method: 'post',
          url: 'api-bs/message/base/checkvc',
          data: {
            tel: this.ruleForm.phone.replace(/\s+/g, ''),
            vc: value,
          },
        }).then(
          (res) => {
            if (!res.data.hasError) {
              callback()
            } else {
              callback(new Error(res.data.errorMsg))
            }
          },
          (response) => {
            callback(new Error('验证失败'))
          }
        )
      }
    }
    return {
      bg: require('../../../static/img/login/loginBb.png'), //背景图
      isRegister: true, //注册开始
      noTel: true,
      isSubmit: false, //提交按钮禁止点击
      isCount: false, //是否在倒计时
      countDownTime: 60 /*倒计时 计数器*/,
      licenseDialog: false, //营业执照示例图
      idcardDialog1: false, //身份证示例图
      idcardDialog2: false, //身份证示例图
      isShowRegArea: 0,
      isShowManaArea: 0,
      industryOptions: [], //行业数据
      outAreasOptions: [], //省外省市
      neiAreasOptions: [], //内蒙省市
      areasOptions: [], //经营地址
      regAreasOptions: [], //注册地址
      regAreas: {
        regAreaId: '', //注册地址全id
      },
      manageAreas: {
        bizAreaId: '', //经营地址全id
      },
      scaleSelct: [
        {
          label: '51-100人',
          value: '02',
        },
        {
          label: '101-200人',
          value: '03',
        },
        {
          label: '201-500人',
          value: '04',
        },
        {
          label: '501-1000人',
          value: '05',
        },
        {
          label: '1000人以上',
          value: '06',
        },
      ],
      rules: {
        companyName: [
          { required: true, validator: validateName, trigger: 'blur' },
        ],
        uscc: [{ required: true, validator: validateUscc, trigger: 'change' }],
        industry: [
          { required: true, message: '请选择行业', trigger: 'change' },
        ],
        scale: [
          { required: true, message: '请选择企业规模', trigger: 'change' },
        ],
        belong: [
          { required: true, message: '请选择企业归属', trigger: 'change' },
        ],
        regAddress: [
          { required: true, message: '请选择注册地址', trigger: 'change' },
        ],
        manageAddress: [
          { required: true, message: '请输入经营地址', trigger: 'change' },
        ],
        address: [
          { required: true, message: '请输入经营地址', trigger: 'change' },
        ],
        phone: [
          // { required: true, message: "请输入密保手机号", trigger: "blur" },
          // { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
          { required: true, validator: validatePhone, trigger: 'blur' },
        ],
        vscode: [
          { required: true, validator: validateVscode, trigger: 'blur' },
        ],
      },
      ruleForm: {
        companyName: '',
        uscc: '',
        industry: '',
        scale: '',
        belong: '1',
        regAreaId: [],
        bizAreaId: [], //本省经营地址
        manageAddress: [], //外省经营地址
        regAddress: [],
        address: '',
        phone: '',
        vscode: '',
      },
      file: [
        {
          //上传图片
          originalName: '', //原文件名
          imgId: '', //图片id
          newName: 'LICENSE', //新文件名(营业执照)
          FileSize: '', //文件大小
          FileType: '', //文件类型
          relativePath: '', //文件相对路径
          imgSrc: '', //文件绝对路径
          isShow: false,
        },
        {
          originalName: '', //原文件名
          imgId: '', //图片id
          newName: 'IDCARDFRONT', //新文件名(身份证)
          FileSize: '', //文件大小
          FileType: '', //文件类型
          relativePath: '', //文件相对路径
          imgSrc: '', //文件绝对路径
          isShow: false,
        },
        {
          originalName: '', //原文件名
          imgId: '', //图片id
          newName: 'IDCARDBACK', //新文件名(身份证)
          FileSize: '', //文件大小
          FileType: '', //文件类型
          relativePath: '', //文件相对路径
          imgSrc: '', //文件绝对路径
          isShow: false,
        },
      ],
      imgRemind: '', //图片上传不完整的提示
    }
  },
  created() {
    //获取行业
    this.selectIndustry()
    //获取内蒙省市
    this.selectNeiAreas()
    //获取全国省市除内蒙
    this.selectOutAreas()
  },
  methods: {
    //跳转登录
    skipLogin() {
      if (this.isCzUser()) {
        this.$router.replace({
          path: '#/login/loginNextCz',
          name: 'loginNextCz',
          query: {
            type: 'QY',
          },
        })
      } else if (this.isEsUser()) {
        this.$router.replace({
          path: '#/login/loginNext',
          name: 'loginNext',
          query: {
            type: 'XM',
          },
        })
      } else {
        this.$router.replace({
          path: '#/login/loginNext',
          name: 'loginNext',
          query: {
            type: 'QY',
          },
        })
      }
    },
    //改变企业归属
    changeBelong(value) {
      //（本省：1，外省：2）
      if (value === '1') {
        ++this.isShowRegArea
        this.regAreasOptions = this.neiAreasOptions
        this.ruleForm.address = ''
        this.$refs.ruleForm.validateField('address', (Error) => {})
      } else {
        ++this.isShowRegArea
        ++this.isShowManaArea
        this.regAreasOptions = this.outAreasOptions
        this.ruleForm.manageAddress = []
        this.$refs.ruleForm.validateField('manageAddress', (Error) => {})
      }
      this.ruleForm.regAddress = []
      this.$refs.ruleForm.validateField('regAddress', (Error) => {})
    },
    //请求行业
    selectIndustry() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-bs/industry/base/detailbyindustryid',
      })
        .then((res) => {
          vm.industryOptions = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取行业数据失败',
            type: 'error',
          })
        })
    },
    //获取省外省市
    selectOutAreas() {
      let vm = this
      //（本省：1，外省：2）
      vm.axios({
        method: 'post',
        url: 'api-bs/areadic/base/areas',
        data: {
          belongs: 2,
          areaId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            vm.outAreasOptions = res.data.result
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '获取区域数据失败',
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取区域数据失败',
            type: 'error',
          })
        })
    },
    //获取内蒙省市
    selectNeiAreas() {
      let vm = this
      //（本省：1，外省：2）
      vm.axios({
        method: 'post',
        url: 'api-bs/areadic/base/areas',
        data: {
          belongs: 1,
          areaId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then(
          (res) => {
            ++vm.isShowRegArea
            ++vm.isShowManaArea
            //内蒙省市
            if (!res.data.hasError) {
              vm.neiAreasOptions = res.data.result
              vm.regAreasOptions = res.data.result
              vm.areasOptions = res.data.result
            } else {
              this.$message({
                showClose: true,
                duration: 3000,
                message: '获取区域数据失败',
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '获取区域数据失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //发送验证码倒计时
    countDown() {
      let vm = this
      //开启倒计时
      vm.isCount = true
      var auth_timetimer = setInterval(() => {
        vm.countDownTime--
        if (vm.countDownTime <= 0) {
          vm.isCount = false
          clearInterval(auth_timetimer)
        }
      }, 1000)
    },
    //发送验证码
    sendVscode() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-bs/message/base/sendvc',
        data: {
          tel: vm.ruleForm.phone,
        },
      })
        .then(
          (res) => {
            //验证码失败
            if (res.data.hasError) {
              vm.noTel = false
              this.$message({
                showClose: true,
                duration: 3000,
                message: '验证码发送失败',
                type: 'error',
              })
            } else {
              vm.noTel = false
            }
          },
          (res) => {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '验证码发送失败',
              type: 'error',
            })
            vm.noTel = false
            vm.isCount = false
          }
        )
        .catch((error) => {
          vm.noTel = false
          vm.isCount = false
        })
    },
    //发送短信验证码
    getVscode() {
      let vm = this
      vm.noTel = true
      this.$refs.ruleForm.validateField('phone', (error) => {
        if (error) {
          //return false;
        } else {
          //验证码倒计时
          vm.isCount = true
          vm.countDownTime = 60
          vm.countDown()
          vm.sendVscode()
        }
      })
    },
    //本省企业经营地址等于注册地址
    handerChange(item) {
      if (this.ruleForm.regAddress.length > 0) {
        if (this.ruleForm.belong === '1') {
          let regAreaArray = this.$refs.regAreas.getCheckedNodes()[0].pathLabels
          if (regAreaArray.length > 1) {
            this.ruleForm.address = regAreaArray[0] + ' / ' + regAreaArray[1]
          } else {
            this.ruleForm.address = regAreaArray[0]
          }
        }
      }
    },
    //获取所属行业
    getIndustry() {
      if (this.ruleForm.industry.length > 0) {
        this.ruleForm.industry =
          this.$refs.industry.getCheckedNodes()[0].path[1]
      }
    },
    //获取注册地址的省市区
    getRegAddress() {
      let path = this.$refs.regAreas.getCheckedNodes()[0].path
      let address = this.$refs.regAreas.getCheckedNodes()[0].pathLabels
      this.regAreas.regAreaId = this.$refs.regAreas.getCheckedNodes()[0].value
      // this.regAreas.regAreaName = address[0]+address[1];
      // this.regAreas.regAreaName = "";
      // if(this.ruleForm.belong ==="1"){ //内蒙注册地址
      //   this.regAreas.regCityId = path[0];
      //   this.regAreas.regCityName = address[0];
      //   this.regAreas.regCountyId = path[1];
      //   this.regAreas.regCountyName = address[1];
      // }else{ //外省
      //   this.regAreas.regProvinceId = path[0];
      //   this.regAreas.regProvinceName = address[0];
      //   this.regAreas.regCityId = path[1];
      //   this.regAreas.regCityName = address[1];
      // }
    },
    //获取经营地址的市区
    getManageAddress() {
      if (this.ruleForm.belong === '1') {
        //内蒙经营地址
        this.manageAreas.bizAreaId = this.regAreas.regAreaId
        // this.manageAreas.bizAreaName = this.regAreas.regAreaName;
        // this.manageAreas.bizCityId = this.regAreas.regCityId;
        // this.manageAreas.bizCityName = this.regAreas.regCityName;
        // this.manageAreas.bizCountyId =  this.regAreas.regCountyId;
        // this.manageAreas.bizCountyName = this.regAreas.regCountyName;
      } else {
        //外省地址
        // let path = this.$refs.manageAreas.getCheckedNodes()[0].path;
        // let address = this.$refs.manageAreas.getCheckedNodes()[0].pathLabels;
        // this.manageAreas.bizAreaId = path[1];
        // this.manageAreas.bizAreaName = address[0]+address[1];
        this.manageAreas.bizAreaId =
          this.$refs.manageAreas.getCheckedNodes()[0].value
        // this.manageAreas.bizAreaName = "";
        // this.manageAreas.bizCityId = path[0];
        // this.manageAreas.bizCityName = address[0];
        // this.manageAreas.bizCountyId = path[1];
        // this.manageAreas.bizCountyName = address[1];
      }
    },
    //图片上传
    ajaxUpload(formName, index, imgName) {
      var vm = this
      var options = {
        url: common.uploadUrl + 'api-f/files/upload',
        type: 'post',
        dataType: 'json',
        success: function (data) {
          vm.file[index].originalName = data.name
          vm.file[index].imgId = data.id
          vm.file[index].newName = data.id + imgName
          vm.file[index].FileSize = data.size
          vm.file[index].FileType = data.contentType
          vm.file[index].relativePath = data.path
          vm.file[index].imgSrc = data.url
          vm.file[index].isShow = true
        },
        error: function () {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '图片上传失败',
            type: 'error',
          })
        },
      }
      $('#' + formName).ajaxSubmit(options)
      return false
    },
    //上传图片
    uploadImg(inputId, index, formName, imgName) {
      var vm = this
      var fileName
      var file
      var fileSize
      try {
        fileName = $('#' + inputId).val()
        file = $('#' + inputId)[0].files[0]
        fileSize = (file.size / 1024).toFixed(0)
      } catch (e) {
        this.$message({
          message:
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过5M，建议使用FireFox、Chrome或IE10以上浏览器。',
          type: 'warning',
        })
      }
      if (fileName) {
        //判断图片类型
        if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(fileName)) {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '图片类型必须是jpeg，jpg，png中的一种',
            type: 'error',
          })
          $('#' + inputId).val('')
          return
        }
        //判断图片大小
        if (fileSize / 1 > 1024 * 5) {
          vm.$message({
            showClose: true,
            duration: 3000,
            message: '图片大小不能超过5M',
            type: 'error',
          })
          $('#' + inputId).val('')
          return
        }
        vm.ajaxUpload(formName, index, imgName)
      }
    },
    //获取图片数组
    getImg() {
      let vm = this
      const fileArray = new Array()
      for (var j = 0; j < vm.file.length; j++) {
        fileArray[j] = {
          originalName: vm.file[j].originalName,
          newName: vm.file[j].imgId + vm.file[j].newName,
          FileSize: vm.file[j].FileSize,
          FileType: vm.file[j].FileType,
          relativePath: vm.file[j].relativePath,
        }
      }
      return JSON.stringify(fileArray)
    },
    //提交表单请求
    submitRequest() {
      let vm = this
      vm.axios({
        method: 'post',
        url: 'api-c/companyaudit/expand/addcompany',
        data: {
          name: vm.ruleForm.companyName,
          uscc: vm.ruleForm.uscc,
          industryId: vm.ruleForm.industry,
          scale: vm.ruleForm.scale,
          belongs: vm.ruleForm.belong,
          regAreaId: vm.regAreas.regAreaId, // --注册地址全id
          // regAreaName:vm.regAreas.regAreaName,// –注册地址全名称
          // regProvinceId:vm.regAreas.regProvinceId,// --注册地址省id
          // regProvinceName:vm.regAreas.regProvinceName,// ---注册地址省名称
          // regCityId:vm.regAreas.regCityId,//   ---注册地址市id
          // regCityName:vm.regAreas.regCityName,//   ---注册地址市名称
          // regCountyId:vm.regAreas.regCountyId,//  --注册地址区id
          // regCountyName:vm.regAreas.regCountyName,//  --注册地址区名称
          bizAreaId: vm.manageAreas.bizAreaId, //   ---经营地址全id
          // bizAreaName:vm.manageAreas.bizAreaName,//   --经营地址全名称
          // bizCityId:vm.manageAreas.bizCityId,//  --经营地址市id
          // bizCityName:vm.manageAreas.bizCityName,//   ---经营地址市名称
          // bizCountyId:vm.manageAreas.bizCountyId,//  ---经营地址区id
          // bizCountyName:vm.manageAreas.bizCountyName,//  --经营地址区名称
          tel: vm.ruleForm.phone,
          vc: vm.ruleForm.vscode,
          fileVOs: vm.getImg(),
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              vm.isRegister = false
            } else {
              this.$message({
                showClose: true,
                duration: 3000,
                message: res.data.errorMsg,
                type: 'error',
              })
            }
            vm.isSubmit = false
          },
          (res) => {
            this.$message({
              showClose: true,
              duration: 3000,
              message: '提交失败',
              type: 'error',
            })
            vm.isSubmit = false
          }
        )
        .catch((error) => {})
    },
    //提交申请
    submitForm(formName) {
      let vm = this
      // vm.isSubmit = true;
      vm.$refs[formName].validate((valid) => {
        if (valid) {
          var isOk = 0
          for (var i = 0; i < this.file.length; i++) {
            if (!vm.file[i].imgSrc) {
              isOk++
            }
          }
          if (isOk > 0) {
            vm.imgRemind = '请上传三张图片'
            vm.isSubmit = false
          } else {
            vm.imgRemind = ''
            //获取行业
            vm.getIndustry()
            //获取注册地址的省市区
            vm.getRegAddress()
            //获取经营地址的市区
            vm.getManageAddress()
            //发送请求
            vm.submitRequest()
          }
        } else {
          vm.isSubmit = false
          return false
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  .boxWrap {
    position: fixed;
    top: 0;
    left: 0;
    right: -17px;
    bottom: 0;
    //padding-top: 3%;
    background-size: 100% 100%;
    overflow-y: auto;
    .topLogo {
      text-align: center;
      height: 80px;
      line-height: 80px;
      margin: 2% 0px;
    }
    .topLogo img {
      vertical-align: middle;
      width: 70px;
      height: 79px;
      margin-top: -15px;
    }
    .topLogo .title {
      display: inline-block;
      margin-left: 30px;
      font-size: 36px;
      font-weight: bold;
      color: #fff;
    }
    @media screen and (min-width: 1400px) and (max-width: 1600px) {
      .topLogo .title {
        font-size: 30px;
      }
    }
    @media only screen and (max-width: 1400px) {
      .topLogo .title {
        font-size: 28px;
      }
    }
    .mainBox {
      width: 980px;
      background-color: #fff;
      margin: 0 auto;
      border-radius: 10px;
      margin-bottom: 35px;
      padding: 60px;
      text-align: center;
      position: relative;
      .formTop {
        color: #666;
        font-size: 14px;
        margin-bottom: 30px;
        .applyTitle {
          font-size: 24px;
        }
        .loginLink {
          position: absolute;
          right: -25px;
          top: -30px;
          .toLogin {
            color: #409eff;
            cursor: pointer;
          }
          .toLogin:hover {
            color: #65aef9;
          }
          // a {
          //   vertical-align: text-top;
          // }
        }
      }
      .ruleForm {
        width: 500px;
        display: inline-block;
        .el-select {
          width: 100%;
        }
        .industrySelect {
          width: 361px;
        }
        .areasSelect {
          width: 361px;
        }
        .vscodeInput {
          .el-input {
            width: 205px;
          }
          .vscodeBtn {
            //display: inline-block;
            width: 128px;
            border: 1px solid #009588;
            color: #009588;
            margin-left: 19px;
          }
        }
        .radioBox /deep/.el-form-item__content {
          text-align: left;
        }
        /deep/.imgLabel {
          label:before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
          }
          .imgRemind {
            color: #f56c6c;
            font-size: 12px;
            line-height: 1;
          }
        }
      }
      .registerBtn {
        margin-top: 0px;
      }
      .suceesRemind {
        font-size: 28px;
        color: #009588;
        margin: 30px 0px 0px;
      }
      .el-dialog img {
        width: 100%;
      }
    }
    .alignCenter {
      text-align: center;
    }
    .registered {
      text-align: center;
      padding: 50px 100px;
      margin-top: 5%;
      .suceesRemind {
        font-size: 28px;
        color: #009588;
        margin: 30px 0px 0px;
      }
      .messageRemind {
        margin-bottom: 25px;
        color: #666;
        font-size: 14px;
        margin-top: 20px;
      }
    }
  }
  //上传图片样式
  .imgBoxs {
    .imgBox {
      text-align: center;
      float: left;
      margin-right: 15px;
      font-size: 12px;
      .imgTopBox {
        width: 104px;
        height: 104px;
        border: 1px dotted #d4dae6;
        position: relative;
        background-color: #f5f7fb;
        .uploadBtn {
          width: 102px;
          height: 73px;
          cursor: pointer;
          input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            height: 74px;
            width: 104px;
          }
          i {
            line-height: 74px;
            font-size: 25px;
            color: #b5b6b7;
          }
          img {
            width: 102px;
            height: 73px;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .imgName {
          height: 30px;
          line-height: 30px;
          background: rgba(206, 206, 206, 0.3);
          color: #aaa;
        }
      }
    }
  }
  /deep/.el-dialog__body {
    max-height: fit-content;
    text-align: center;
  }
}

// 提示语
.reminder {
  color: #ff4242;
  font-size: 14px;
  // border: 1px solid #ffaa00;
  background: #fffbe6;
  border-radius: 3px;
  padding: 0 10px;
  // margin: 24px;
  // margin-bottom: 0;
  height: 48px;
  line-height: 48px;
  border-radius: 10px 10px 0 0;
  i {
    color: #ffaa00;
    font-size: 20px;
    vertical-align: -2px;
  }
}

.container .boxWrap .registerMainBox {
  padding: 0;
  // background: #fff;
}

.container .boxWrap .mainBox .formTop .loginLink {
  position: static;
  text-align: right;
  margin: 0 30px;
  padding: 20px 0 10px 0;
  border-bottom: 1px solid #d5dee7;
}

.applyTitle {
  margin-top: 35px;
}

.boxWrap {
  background: #f2f4f6;
}

.boxWrap /deep/ .topTitleBox {
  background: url('../../../static/img/loginImg/headerBG.png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 30px;
}
</style>
